<!-- 模块说明 -->
<script setup lang="ts">
import { ref, onMounted, computed } from "vue";
import { getCar, delCar } from "../../api/api"
import { showNotify } from 'vant';
const info = ref({
  userid: 1
})
const list = ref([])
const settle = ref([])
const Carlist = <any>ref("")
const getCars = async () => {
  let { data } = await getCar(info.value)
  console.log(data)
  Carlist.value = data
  settle.value = data.params
  emptyStatus()
}
// 空状态
const isShow = ref(false)
//判断是否显示空状态
const emptyStatus = () => {
  isShow.value = Carlist.value.length === 0 ? true : false
}
//删除
const delCars = async (id: any) => {
  let res = await delCar(id)
  console.log(res, "res")
  showNotify({ type: 'success', message: '删除成功' })
  getCars()
}
//总价
const ol = async () => {
}
computed(() => {
  const allclick = () => {
  }
})
onMounted(() => {
  getCars()

})
</script>
<template>
  <!-- 头部 -->
  <div class="cart">
    <van-nav-bar title="购物车" fixed />
    <div class="cart_container">
      <!-- vant空状态 -->
      <van-empty v-show="isShow" description="购物车目前还没有商品" image="https://img.yzcdn.cn/vant/custom-empty-image.png">
        <router-link to="/mall">
          <van-button round type="danger" class="bottom-button">
            去购物
          </van-button>
        </router-link>
      </van-empty>
      <!-- 空状态end -->
      <div v-for="item, i in Carlist" :key="i" class="list">
        <input type="checkbox" name="" id="" v-model="item.state">
        <img :src="item.img1" alt="" class="img1">
        <div>
          <p class="Carp">{{ item.goodsname }}</p>
          <span style="color: red; font-size: 16px;">￥{{ item.price * item.applynum }}</span>
          <div class="counter">
            <button type="button" class="btn_left"
              @click="item.applynum <= 0 ? item.applynum = 0 : item.applynum--">-</button>
            <span>{{ item.applynum }}</span>
            <button type="button" class="btn_right" @click="item.applynum++">+</button>
          </div>
          <!-- <van-stepper v-model="item.applynum" style="float: right;" /> -->
        </div>
        <van-button type="danger" class="button" @click="delCars(item.id)">删除</van-button>
      </div>
    </div>
    <!-- 底部 -->
    <div class="center">
      <div class="total">合计 : ￥
        <!-- 合计 -->
        <span class="price"> {{ 22.76 }}</span>
      </div>
      <div class="settle">结算({{ Carlist.length }})</div>
    </div>
  </div>
  <!-- 购物车end -->
</template>

<style lang="scss" scoped>
.cart {
  margin: 50px 10px;
}

.bottom-button {
  width: 80px;
  height: 30px;
}

.list {
  position: relative;
  box-shadow: 0px 0px 5px #ccc;
  margin-bottom: 20px;
  display: flex;
  border-radius: 8px;
  align-items: center;
  display: flex;
  flex: 1;
  padding: 20px 0;

  .checkbox {
    position: absolute;
    top: 0.7rem;
    left: 0.1rem;
  }

  .button {
    margin: 20px;
    width: 80px;
    height: 35px;
  }
}

.Carp {
  font-weight: bold;
  margin: 10px;
  overflow: hidden;
  display: -webkit-box;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  white-space: normal;
  width: 150px;
}

.img1 {
  width: 80px;
}

// 底部
.center {
  position: fixed;
  bottom: 70px;
  width: 100vw;
  display: flex;
  align-items: center;
  flex: 1;
  border-top: 1px solid #e1e1e1;

  .total {
    width: 80vw;
  }

  .settle {
    width: 20vw;
    background: red;
    color: #fff;
    text-align: center;
    height: 50px;
    line-height: 50px;
    padding: 0 20px;
  }

  .price {
    color: red;
    font-size: 23px;
    font-weight: 500;
  }
}
</style>
